<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import echarts from 'echarts'
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'
import wordCloud from 'echarts-wordcloud/dist/echarts-wordcloud.min.js'

export default {
  name: 'chart-wordcloud-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'wordCloud',
      isrun: false
    }
  },

  mounted () {
    let vm = this
    vm.$nextTick(() => {
      vm.init()
    })
  },

  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart)

      if (this.data.length > 0) {
        this.setOption().then(() => {
          this.isrun = false
        })
      }
    },

    async setOption () {
      let vm = this
      if (this.data.length > 0 && !this.isrun) {
        vm.isrun = true
        let colorList = vm.colors
        let minSize = vm.minSize
        if (this.chart) {
          this.chart.clear()
        }
        if (this.data.length <= 8) {
          minSize = vm.maxSize
        }
        let option = {
          backgroundColor: vm.bgColor,
          tooltip: {
            show: vm.showTooltip,
            formatter: vm.useTooltipFun ? vm.tooltipFunction : vm.tooltipLabel
          },
          series: [{
            type: vm.chartType,
            gridSize: vm.gridSize ? parseInt(vm.gridSize) : 15,
            sizeRange: [parseInt(minSize), parseInt(vm.maxSize)],
            rotationRange: vm.rotationRange ? vm.rotationRange.split(',') : [-45, 0, 45, 90],
            drawOutOfBound: vm.drawOutOfBound,
            shape: vm.shape,
            textStyle: {
              normal: {
                color: function() {
                  if (vm.randomColor) {
                    return 'rgb(' +
                      Math.round(Math.random() * 255) +
                      ', ' + Math.round(Math.random() * 255) +
                      ', ' + Math.round(Math.random() * 255) + ')'
                  } else {
                    let index = Math.floor(Math.random() * colorList.length)
                    return colorList[index]
                  }
                }
              }
            },
            left: 'center',
            top: 'center',
            width: vm.width,
            height: vm.height,
            right: null,
            bottom: null,
            data: vm.data
          }]
        }
        if (!vm.icon) {
          await vm.chart.setOption(option, true)
          vm.resize()
        } else {
          let maskImage = new Image()
          maskImage.src = vm.icon
          maskImage.onload = function () {
            option.maskImage = maskImage
            vm.chart.setOption(option, true)
            vm.resize()
          }
        }
      }
    }
  },

  watch: {
    height () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    width () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    bgColor () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    showTooltip () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    minSize () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    maxSize () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    shape () {
      this.setOption().then(() => {
        this.isrun = false
      })
    },
    icon: {
      deep: true,
      handler () {
        this.setOption().then(() => {
        this.isrun = false
      })
      }
    },

    data: {
      deep: true,
      handler () {
        this.setOption().then(() => {
        this.isrun = false
      })
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
